<style scoped>
    .layout{
        /* border: 1px solid #d7dde4; */
        background: #f5f7f9;
        position: relative;
        /* border-radius: 4px; */
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .menu-icon{
        transition: all .3s;
        transform: rotate(-90deg);
    }
    .rotate-icon{
        transform: rotate(0deg);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
<template>
    <div class="layout">
        <Layout>
            <Sider v-show="isPhone" ref="side1" hide-trigger collapsible :collapsed-width="0" v-model="isCollapsed" style="height:100vh;overflow:auto;background: #001529;z-index:10">
                <div lh4 long pdx2>
                    <router-link white linkable nopd :to="{name:'shopping-cart'}">
                        <Icon v-if="isPhone" id="shopping-cart-top" type="md-cart" sz1 mgr1/>
                        <span>购物车({{shoppingCartItems.length}})</span>
                    </router-link>
                    <div right>
                        <span v-if="isLogined">
                            <span linkable @click="loginout" nopd white>注销</span>
                        </span>
                        <span v-else>
                            <router-link linkable :to="{name:'login'}" nopd white>登陆</router-link>
                            <Divider type="vertical" />
                            <router-link linkable :to="{name:'register'}" nopd white>注册</router-link>
                        </span>
                    </div>
                </div>
				<slot name="menu"></slot>
            </Sider>
            <Layout>
                <Header v-if="isPhone" :style="{padding: 0}" class="layout-header-bar" bdb-gray4 style="z-index:100;overflow:hidden;">
                    <router-link v-if="isCollapsed" :to="{ name: 'home' }">
                        <img src="../images/logo.png" style="height:40px;margin-top:12px;" pdx2 alt="">
                    </router-link>
                    <span right>
                        <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
                    </span>
                    <!-- <span pdx2 sz1>山西圣华义齿有限公司官网</span>
                    <router-link pdx2 sz1 right :to="{ name: 'home' }">首页</router-link> -->
                </Header>
                <Content id="index_content" :style="{'margin-top': isPhone?'-64px':'0', 'padding-top': isPhone?'64px':'0'}" style="width:100vw;height:100vh;overflow-y:auto;overflow-x:hidden;margin-top:-64px;padding-top:64px;background-color:#fff">
					<main-client>
                        <div slot="content">
                            <slot name="content"></slot>
                        </div>
                    </main-client>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../lib/abpbase'
import MainClient from './main-client.vue'
import MainPhone from './main-phone.vue'
import Util from '../lib/util';

@Component({
    components: { MainClient, MainPhone }
})
export default class Main extends AbpBase{
	search:string = "";
    isCollapsed:Boolean = true
    get rotateIcon () {
        return [
            'menu-icon',
            this.isCollapsed ? 'rotate-icon' : ''
        ];
    }
    get menuitemClasses () {
        return [
            'menu-item',
            this.isCollapsed ? 'collapsed-menu' : ''
        ]
    }
    collapsedSider () {
        (this.$refs.side1 as any).toggleCollapse();
    }
    closeMenu() {
        if(!this.isCollapsed) {
            this.collapsedSider();
        }
    }
	get footer() {
		return this.$store.state.websiteInfo.homeFooter;
	}
	get cachePage(): Array<string> {
		return [];
	}
	get shoppingCartItems() {
		return this.$store.state.shoppingcart.items;
	}
	get workingDays() {
		var temp = this.footer.websiteInfo.workingDay || "";
		return temp.split("\n");
	}
	loginout(){
		this.$store.commit('app/logout', this);
		Util.abp.auth.clearToken();
		location.reload();
	}
	handleGoTo(url) {
		window.open(url); 
	}
	handleGotoSearch() {
		this.$router.push({
			name: 'search-result',
			query: {
				search: this.search
			}
		});
	}
	get index() {
		return this.$store.state.websiteInfo.homeIndex;
	}
	async getSelf() {
		await this.$store.dispatch('self/getSelf');
	}
	async handleGetFooter() {
		await this.$store.dispatch('websiteInfo/getHomeFooter');
	}
	async created() {
    }
    @Watch('$route')
    handleOnRouteChange() {
        this.closeMenu();
        document.getElementById("index_content").scrollTop = 0;
    }
}
</script>
